<template>
    <div class="blogdetail">
        <el-main>
            <div style="margin-bottom:20px;margin-top:-20px">
                <h1>博客详情：{{blog.title}}</h1>
                <span class="el-descriptions__label" style="font-size:14px">标签：</span>
                <span class="el-descriptions__content">
                    <span class="el-tag el-tag--small el-tag--light" data-v-c19941ce="">
                        <span class="el-tag__content">{{blog.tag}}</span>
                    </span>
                </span>
            </div>
            <div class="el-descriptions__body">
                {{blog.content}}
            </div>
                    
            <el-footer>
                <el-button type="primary" style="float:left" @click="prevblog" v-if="ifHasPrev">上一篇</el-button>
                <el-button type="primary" style="float:right" @click="nextblog" v-if="ifHasNext">下一篇</el-button>
            </el-footer>
        </el-main>
    </div>
</template>

<script>
export default {
    name:"blogDetail",
    data(){
        return {
            blog:{title:"",tag:"",content:""},
            blogList:[],
            id:this.$route.params.id,
            ifHasPrev:false,
            ifHasNext:false
        }
    },
    mounted(){
        //从BlogList接收博客列表和博客索引
        // 打开新页面查看博客详情，但刷新就没有了，还报304提醒
        this.blogList = JSON.parse(window.params.blogList);
        console.log("接收的",this.blogList)
        let id = this.$route.params.id;
        console.log('id',id);

        // 字符串用params接收不到，为undefined
        // this.blogList = this.$route.params.blogList;
        // console.log("接收的",typeof this.$route.params.blogList,this.blogList)
        // let id = this.$route.params.id;
        // console.log('id',typeof id,id);

        // console.log('blogList-2',this.blogList);

        this.getBlog(id); 
        this.checkBtn(id);
    },

    // watch:{
    //     '$route.path':function(){
    //         this.id = this.$route.params.id; 
    //         this.getBlog(this.id); 
    //         console.log("watch-id")
            
    //     }
    // },
    methods:{
        // id小于0没有上一篇，id大于列表长度没有下一篇
        checkBtn(id){
            if(id > 0){
                this.ifHasPrev = true;
            }else{
                this.ifHasPrev = false;
            }
            if(id < this.blogList.length-1){
                this.ifHasNext = true;
            }else{
                this.ifHasNext = false;
            }
        },
        // 获取博客信息，并判断是否有上一篇与下一篇
        getBlog(id){
            this.blog = this.blogList[id]; 
            this.checkBtn(id);
        },
        // 跳转到上一篇博客
        prevblog(){
            let id = Number(this.$route.params.id);
            this.$router.push(`/blogs/${id - 1}`);
            this.getBlog(id - 1); 
        },
        // 跳转到下一篇博客
        nextblog(){
            let id = Number(this.$route.params.id);
            this.$router.push(`/blogs/${id + 1}`);
            this.getBlog(id + 1); 
        }
    }  
}
</script>

<style scoped>
.el-descriptions__body{
    box-sizing: border-box;
    text-align: left;
    font-weight: 400;
    line-height: 23px;
    font-size: 14px;
    margin-bottom:20px;
    background: rgb(209, 224, 220);
}
.blogdetail{
    display:flex;
}
</style>